<script setup lang="ts">
import { onMounted } from 'vue';
import { Setting, Refresh } from '@icon-park/vue-next';
import useCameraStore from '@renderer/store/useCameraStore';

const store = useCameraStore();
onMounted(() => {
  const video = document.querySelector('video')!;
  const constraints = {
    audio: false,
    video: true,
  } as MediaStreamConstraints;

  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    video.srcObject = stream;
    video.play();
  });
});

const jumpSetting = () => {
  store.changeStatus(true);
};
</script>

<template>
  <Setting class="setting" theme="outline" size="24" fill="red" @click="jumpSetting" />
  <div :class="['w-screen h-screen  overflow-hidden', { 'rounded-full': store.sharp }]">
    <video :class="['h-screen object-cover', { 'rounded-full': store.sharp }]"></video>
  </div>
  <Refresh class="refresh" theme="outline" size="24" fill="red" @click="store.setSharp" />
</template>

<style lang="scss" scoped>
.refresh,
.setting {
  @apply absolute left-1/2 -translate-x-1/2 opacity-20 z-50 mt-2  hover:opacity-100 hover:cursor-pointer;
}
.refresh {
  @apply bottom-2;
}
</style>
